<template>
  <div class="white-box">
    <div class="task-one">
      <div class="task-one__item">
        <span class="task-one__label">名称：</span>
        <el-input placeholder="请输入名称" v-model="searchParams.pianqu_title" @keyup.enter.native="handleSearch"
                  clearable></el-input>
      </div>
      <div class="task-one__item">
        <span class="task-one__label">名称：</span>
        <el-input placeholder="请输入名称" v-model="searchParams.pianqu_title" @keyup.enter.native="handleSearch"
                  clearable></el-input>
      </div>
      <div class="task-one__item">
        <span class="task-one__label">名称：</span>
        <el-input placeholder="请输入名称" v-model="searchParams.pianqu_title" @keyup.enter.native="handleSearch"
                  clearable></el-input>
      </div>
      <div class="task-one__btn task-wrap-btn clearfix">
        <el-button type="primary" :loading="searchBtnLoading" :icon="Search"
                   @click="handleSearch">搜索</el-button>
        <el-button type="success" @click="importData('admin/order/rentOrder/export',searchParams)"
                   :icon="Download">导出</el-button>
      </div>
    </div>

    <el-tabs v-model="tabsActive" type="card">
      <el-tab-pane label="全部（856）" name="all"></el-tab-pane>
      <template v-for="(item, index) in selectOptions.status">
        <el-tab-pane :label="item.label" :name="item.value"></el-tab-pane>
      </template>
    </el-tabs>

    <div style="margin-bottom: 10px">
      <span style="margin-right: 20px">已选：0</span>
      <el-button plain size="small" @click="">批量打印</el-button>
    </div>

    <div class="table-head flexs">
      <div class="table-check">
        <el-checkbox value="Value 1" size="large"/>
      </div>
      <div class="table-good table-head-base">商品信息</div>
      <div class="table-price table-head-base">收货信息</div>
      <div class="table-pay-type table-head-base">实付金额</div>
      <div class="table-buy-info table-head-base">买家信息</div>
      <div class="table-oper table-head-base">操作</div>
    </div>
    <div class="table-body">
      <div class="table-item"  v-for="(item, index) in 2">
        <div class="table-item-head flexs">
          <div class="table-item__head-left">
            <div class="table-check" style="margin-right: 12px;">
              <el-checkbox value="Value 1" size="large"/>
            </div>
            <p class="item-head__sn">订单编号：24122783826</p>
            <p class="item-head__sn">商户单号：24122732807</p>
            <p class="item-head__text">下单时间：2024-12-27 16:49:54</p>
            <p class="item-head__text">发货日期：2024-12-27 16:49:54</p>
            <p class="item-head__text"> 订单状态：<span>已发货</span></p>
          </div>
          <div class="table-item__head-right">
            <el-button class="action-btn" size="small" plain type="default" @click="">打印发货单</el-button>
          </div>
        </div>
        <div class="table-item-cont">
          <div class="table-good table-head-base item-cont__base" style="padding-bottom: 8px;">
            <div class="table-sub">
              <div class="flexs table-good-item" v-for="(item, index) in 2">
                <el-image style="width: 65px; height: 65px; border: 1px solid rgb(204, 204, 204); padding: 3px; border-radius: 5%;" src="https://imgzh.kmmyxb.cn/gallery/5003413bd9aa34137c573314a5fa1dc4_1.png!img_200" fit="cover" />
                <div style="margin-left: 10px">
                  <p class="table-sub__p-mb">抗衰系列</p>
                  <p class="table-sub__p-mb"><span  style="font-weight: 700;">￥0.01</span> <span>数量：99件</span> </p>
                </div>
              </div>
            </div>
          </div>
          <div class="table-price table-head-base item-cont__base">
            <div class="table-sub">
              <p class="table-sub__p-mb">李秀蓉</p>
              <p class="table-sub__p-mb">18687067198</p>
              <p class="table-sub__p-mb">云南省 昆明市 官渡区 关上街道海明路903号</p>
            </div>
          </div>
          <div class="table-pay-type table-head-base item-cont__base">
            <div class="table-sub">
              <p class="table-sub__p-mb">实付金额：<em style="font-size: 16px;color: rgb(75, 147, 250);">￥61.00</em></p>
              <p class="table-sub__p-mb">已优惠：￥0.00</p>
              <p class="table-sub__p-mb">包含运费：￥0.00</p>
              <p class="table-sub__p-mb">支付方式：<span style="color: rgb(75, 147, 250);">余额支付</span></p>
              <p class="table-sub__p-mb">订单来源：自主下单</p>
            </div>
          </div>
          <div class="table-buy-info table-head-base item-cont__base">
            <div class="table-sub">
              <div class="flexs">
                <el-avatar :size="50" src="https://imgzh.kmmyxb.cn/gallery/5003413bd9aa34137c573314a5fa1dc4_1.png!img_200" />
                <div style="margin-left: 10px">
                  <p class="table-sub__p-mb">uid：12123</p>
                  <p class="table-sub__p-mb">昵称：张三</p>
                </div>
              </div>
            </div>
          </div>
          <div class="table-oper table-head-base">
            <div class="table-sub table-sub-btn">
              <el-button class="action-btn" size="small" plain type="primary" @click="toOrderDetail()">查看详情</el-button>
              <el-button class="action-btn" size="small" plain type="primary" @click="">标记发货</el-button>
              <el-button class="action-btn" size="small" plain type="primary" @click="">修改地址</el-button>
              <el-button class="action-btn" size="small" plain type="danger" @click="">删除订单</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>


    <el-pagination background v-model:current-page="page" v-model:page-size="pageSize" :page-sizes="pageSizeNum"
                   :total="totalNums" layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>

    <go-back />
  </div>
</template>

<script setup>
import {
  getCurrentInstance,
  ref,
  reactive,
  onMounted,
  watch,
  computed
} from "vue"
import listMixins from "@mixins/hook/list"
import {
  useRouter
} from "vue-router"
import {
  CirclePlus,
  Search,
  Download
} from "@element-plus/icons-vue"
import GoBack from "@components/GoBack.vue"

const router = useRouter()
const {
  proxy
} = getCurrentInstance()

/**
 * minxin列表加载
 */
const {
  page,
  pageSizeNum,
  pageSize,
  loading,
  totalNums,
  searchParams,
  searchBtnLoading,
  apiPath,
  list,
  dialogFormRef,
  dialogShow,
  dialogForm,
  dialogParams,
  handleSearch,
  getData,
  handleAdd,
  handleEdit,
  resetDialogForm,
  handleAllSelected,
  submitDialogForm,
  closeDialog,
  handleAction,
  importData
} = listMixins()

apiPath.value = 'http://192.168.1.170:3000/master/productIndex.json';

onMounted(() => {
  getData()
})
const handleDelete = (row) => {
  handleAction('admin/system/menu/delete', {
    mod_id: row.mod_id,
  })
}

const tabsActive = ref('all')
searchParams.status = computed(() => {
  if (tabsActive.value == 'all') {
    return ''
  }
  return tabsActive.value
})
watch(tabsActive, () => {
  getData()
})
const selectOptions = reactive({
  status: [{
    label: '待付款（120）',
    value: 1
  },
    {
      label: '待发货（0）',
      value: 2
    },
    {
      label: '部分发货（545）',
      value: 3
    },
    {
      label: '代理商发货（1）',
      value: 4
    },
    {
      label: '供应商货（1）',
      value: 5
    },
    {
      label: '交易完成（1）',
      value: 6
    },
    {
      label: '已关闭（1）',
      value: 7
    },
    {
      label: '未付款删除（1）',
      value: 8
    },
    {
      label: '已付款删除（1）',
      value: 9
    },
    {
      label: '待自提（1）',
      value: 10
    },
  ],
  op_user_type: [{
    label: '管家',
    value: 2
  },
    {
      label: '管理人员',
      value: 3
    },
  ]
})
const toOrderDetail = () => {
  router.push({
    path: "/order/detail",
    query: {

    }
  })
}


</script>

<style lang="less">
.table-head {
  background-color: #f5f7fa;
  width: 100%;
  height: 50px;
  border-radius: 2px;
  border: 1px solid #ebeef5;
  overflow: hidden;
  margin-bottom: 12px;
  padding: 0 16px
}

.table-body {
  margin-bottom: 32px;
  min-height: 40px;
  text-align: center;
  font-size: 14px;
  line-height: 40px;
  color: #646566
}

.table-body .table-item {
  border: 1px solid #ebeef5;
  margin-bottom: 12px
}

.table-body .table-item .table-item-head {
  background-color: #f5f7fa;
  width: 100%;
  height: 46px;
  overflow: hidden;
  padding: 0 16px;
  border-bottom: 1px solid #ebeef5
}

.table-body .table-item .table-item-head .table-item__head-left {
  display: flex;
  align-items: center
}

.table-body .table-item .table-item-head .table-item__head-left .item-head__sn {
  font-size: 14px;
  font-weight: 700;
  color: #323233;
  margin-right: 20px;
  flex: none
}

.table-body .table-item .table-item-head .table-item__head-left .item-head__text {
  font-size: 14px;
  color: #323233;
  margin-right: 20px;
  flex: none
}

.table-body .table-item .table-item-head .table-item__head-left .item-head__text span {
  color: #4b93fa
}

.table-body .table-item .table-item-cont {
  display: flex
}

.table-body .table-item .table-item-cont>div {
  padding: 12px 8px;
  font-weight: 500;
  text-align: left
}

.table-body .table-item .table-item-cont>div:last-child {
  //text-align: left
}

.table-body .table-item .table-item-cont>div:last-child .el-button {
  margin: 0 12px 8px 0
}

.table-body .table-item .table-item-cont .table-sub {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  overflow: hidden
}

.table-body .table-item .table-item-cont .item-cont__base {
  border-right: 1px solid #ebeef5
}

.table-check {
  flex: none;
  display: flex;
  margin-right: 4px
}

.table-good {
  flex: 1
}

.table-price {
  width: 15.5%;
  flex: none;
  text-align: left
}

.table-pay-type {
  width: 13%;
  flex: none;
  text-align: left
}

.table-buy-info {
  width: 16.5%;
  flex: none;
  text-align: left
}

.table-oper {
  width: 14%;
  flex: none
}

.table-head-base {
  font-size: 14px;
  font-weight: 700;
  color: #323233;
  padding: 0 8px
}
.table-body .table-item .table-item-cont .table-sub-btn{
  flex-flow: row wrap;
  justify-content: flex-start;
  align-content: center
}

.table-sub__p-mb {
  line-height: 20px;
}
.table-good-item{
  margin-bottom: 10px;
}
.table-good-item:last-child{
  margin-bottom: 0;
}
</style>